<!DOCTYPE html><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>中国城市分布</title>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 15:44:57
    From: https://code.hcharts.cn/highmaps/M9tzGW
*************************************************************************
-->
<div id="container" style="height: 450px;"></div>
<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script src="https://img.hcharts.cn/mapdata/chinaCitys.js"></script>

	<script>
	var mappoint = Highcharts.geojson(Highcharts.maps["china-citys"], 'mappoint'),
    data = [{
        name: '一线城市',
        data: []
    }, {
        name: '准一线城市',
        data: []
    }, {
        name: '二线城市',
        visible: false,
        data: []
    }, {
        name: '三线城市',
        data: [],
        visible: false
    }],
    series = [{
        type: 'map',
        mapData: Highcharts.maps["cn/china"],
        joinBy: 'hc-key',
        name: '随机数据',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        showInLegend: false
    }];
Highcharts.each(mappoint, function(p, i) {
    if (i < 4) {
        data[0].data.push(p);
    } else if (i < 19) {
        data[1].data.push(p);
    } else if (i < 41) {
        data[2].data.push(p);
    } else {
        data[3].data.push(p)
    }
});
series = series.concat(data);
var colors = Highcharts.getOptions().colors,
    map = new Highcharts.Map('container', {
        chart: {
            type: 'mappoint'
        },
        title: {
            text: '中国城市分布'
        },
        subtitle: {
            text: '这里只列举到三线城市，城市级别非官方数据'
        },
        colors: [colors[0], colors[4], colors[2], colors[3], colors[5]],
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        tooltip: {
            useHTML: true,
            headerFormat: '<small>{point.key}</small><table>',
            pointFormat: '<tr><td>城市级别</td><td>{series.name}</td></tr>' 	+
            '<tr><td>所属省份</td><td>{point.properties.province}</td></tr>' + 
            '<tr><td>经纬度</td><td>({point.properties.lon:.2f}, {point.properties.lat:.2f})</td></tr>' + 
            '<tr><td>城市编号</td><td>{point.properties.cityNo}</td></tr>',
            footerFormat: '</table>',
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: false
                },
                marker: {
                    radius: 3
                }
            }
        },
        series: series
    });
</script>

</body></html>